<template>
  <div class="index_context">
    <my-swiper :focusList="focusList" v-if="focusList.length > 0"></my-swiper>
    
    <nav-bar :tomatoes="tomatoes" v-if="tomatoes.length > 0"></nav-bar>
    <download-img></download-img>
    <!-- 主要内容 -->
    <xy-content
      v-for="(item, index) in content_xy"
      :key="index"
      :infoList="item.albumBriefDetailInfos"
      :moduleInfo="item.moduleInfo"
    ></xy-content>

    <re-content v-if="re.length == 0"></re-content>

    <!-- 更多推荐 -->
    <div class="re_box" v-else>
      <c-title :title="title"></c-title>

      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="onLoad"
      >
        <ul class="re_com">
          <li v-for="item in re" :key="item.id">
            <a>
              <d-item
                v-if="item.type == 'album'"
                :img="item.img"
                :id="item.id"
                :title="item.title"
                :des="item.des"
                :countInfo="item.countInfo"
              ></d-item>
              <u-item
                v-else
                :img="item.img"
                :des="item.des"
                :title="item.title"
                :countInfo="item.countInfo"
                :playPath="item.playPath"
                :id="item.id"
                :duration="item.duration"
                :isPlay="item.isPlay"
                @play-track="playTrack"
              >
              </u-item>
            </a>
          </li>
        </ul>
        <template #loading>
          <div class="loading">
            <van-loading color="#ff1e00" type="spinner" />
          </div>
        </template>
      </van-list>
    </div>

    <page-play :playPath="playPath" :isPlay="isPlay"></page-play>
    <my-footer ></my-footer>
    <my-load v-if="visably"></my-load>
  </div>
</template>

<script>
import ReContent from "@/views/recommend/content/ReContent.vue";
import { initTabHomeData } from "@/request/api.js";
export default {
  name: "IndexContent",
  data() {
    return {
      re: [],
      focusList: [],
      tomatoes: [],
      content_xy: [],
      title: "更多推荐",

      loading: true,
      finished: false,

      playPath:"",
      isPlay:false,
    };
  },
  components:{
      ReContent
  },
  computed:{
      visably(){
        if(this.tomatoes.length > 0|| this.tomatoes.length > 0 ){
           
            return false 
          
        }else if(this.re.length > 0){
         
                return false
           
            
        }else{
            return true
        }
      }
  },
  props: {
    moduleKey: {
      type: String,
    },
    moduleName: {
      type: String,
    },
  },
  created() {
    this.initData();
    this.initTingData();
  },
  methods: {
    async initData() {
      const { data: res } = await initTabHomeData(this.moduleKey);
      console.log(res.data);
      res.data.moduleContent.focusImages.forEach((item) => {
        let obj = {
          img: item.adFocusPictureDetail.cover,
        };
        this.focusList.push(obj);
      });
      this.tomatoes = res.data.moduleContent.tomatoes;

      this.content_xy = res.data.moduleContent.moduleRankDatas;
    },

    initTingData() {
      axios({
        url:
          "https://m.ximalaya.com/m-revision/page/index/queryCategoryFeed?moduleKey=" +
          this.moduleKey,
        methods: "GET",
      }).then((res) => {
        console.log("听单成功", res.data);

        let list = [];
        res.data.data.materials.forEach((item) => {
          let obj = {};
          if (item.type == "album") {
            obj = {
              type: item.type,
              id: item.data.id,
              img:
                "https://imagev2.xmcdn.com/" + item.data.albumInfo.cover ||
                "https://imagev2.xmcdn.com/" + item.data.trackInfo.cover,
              title: item.data.albumInfo.title || item.data.trackInfo.title,
              des:
                item.data.albumInfo.salePoint || item.data.trackInfo.salePoint,
              countInfo: item.data.statCountInfo,
            };
          } else {
            obj = {
              type: item.type,
              id: item.data.id,
              img: "https://imagev2.xmcdn.com/" + item.data.trackInfo.cover,
              title: item.data.trackInfo.title,
              des: item.data.trackInfo.intro,
              duration: item.data.trackInfo.duration,
              playPath: item.data.trackInfo.playPath,
              countInfo: item.data.statCountInfo,
              isPlay: false,
            };
          }

          list.push(obj);
        });
        

        this.re.push(...list);

        this.loading = false;

        if (list.length == 0) {
          this.finished = true;
        }
      });
    },

    onLoad() {
      this.initTingData();
    },
    playTrack(obj) {
      console.log(obj);
      if (obj.isPlay) {
        this.re.forEach((item) => {
          if (obj.id == item.id) {
            item.isPlay = obj.isPlay;
          } else {
            item.isPlay = false;
          }
        });
      } else {
        this.re.some((item) => {
          if (obj.id == item.id) {
            item.isPlay = obj.isPlay;
          }
        });
      }

      this.playPath = obj.playPath
      this.isPlay = obj.isPlay
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.navbar {
  margin: 15px 0;
}
.re_box {
  padding: 0 15px;
  ul {
    li {
      padding: 15px 0;
      a {
        display: block;
      }
    }
  }
}
</style>

